<template>
  <div class="main">
    <div class="formList">
      <a-form>
        <a-row :gutter="20">
          <a-col :span="6">
            <a-form-item label="一体杆名称" name="poleName">
              <a-input placeholder="请输入一体杆名称" v-model:value="form.poleName" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="一体杆编号" name="poleNumber">
              <a-input placeholder="请输入一体杆编号" v-model:value="form.poleNumber" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="处置状态" name="handleStatus">
              <a-select v-model:value="form.handleStatus" placeholder="请选择处置状态">
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="0">未派单</a-select-option>
                <a-select-option :value="1">已派单</a-select-option>
                <a-select-option :value="2">已接单</a-select-option>
                <a-select-option :value="3">已完成</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item>
              <a-button type="primary" @click="getWarnListApi">查询</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="warning_list">
      <a-table :columns="columns" :data-source="formList" :loading="loading" :pagination="false">
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'number'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'handleStatus'">
            <span v-if="record.handleStatus === 0">未派单 </span>
            <span v-else-if="record.handleStatus === 1">已派单 </span>
            <span v-else-if="record.handleStatus === 2">已接单 </span>
            <span v-else-if="record.handleStatus === 3">已完成 </span>
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <a-button type="link" disabled style="padding-left: 0" size="small">派单</a-button>
            <a-button type="link" @click="jump(record.id)">详情</a-button>
            <a-popconfirm
              title="是否确认删除当前告警记录?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="confirm(record.id)"
              @cancel="cancel"
            >
              <a-button type="link">删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </div>
    <div class="pagination">
      <a-config-provider :locale="zh_CN"
        ><a-pagination
          v-model:current="form.page"
          v-model:page-size="form.pageSize"
          size="small"
          :total="total"
          :show-total="(total) => `共 ${total} 条`"
          @change="onChange"
          show-size-changer
          show-quick-jumper
          :pageSizeOptions="['10', '20', '30', '40']"
      /></a-config-provider>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { getWarnList, delWarnList, getPole } from '../../api/rod/warnList.js'
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { setId } from '../../utils/auth.js'
const columns = ref([
  { title: '序号', dataIndex: 'number', key: 'number' },
  { title: '一体杆名称', dataIndex: 'poleName', key: 'poleName' },
  { title: '一体杆编号', dataIndex: 'poleNumber', key: 'poleNumber' },
  { title: '故障类型', dataIndex: 'errorType', key: 'errorType' },
  { title: '处置状态', dataIndex: 'handleStatus', key: 'handleStatus' },
  { title: '告警时间', dataIndex: 'warningTime', key: 'warningTime' },
  { title: '操作', dataIndex: 'operation', key: 'operation', align: 'left' }
])
const formList = ref([])
const form = ref({
  page: 1,
  pageSize: 10,
  poleName: '',
  poleNumber: '',
  handleStatus: ''
})
const total = ref(null)
const loading = ref(false)
const msg = ref('')
//获取列表
const getWarnListApi = async () => {
  loading.value = true
  const res = await getWarnList(form.value)
  console.log(res)
  formList.value = res.data.rows
  total.value = res.data.total
  loading.value = false
}
const onChange = (page, pageSize) => {
  form.value.page = page
  form.value.pageSize = pageSize
}

//查询

onMounted(() => {
  getWarnListApi()
})
//删除
const confirm = async (id) => {
  const res = await delWarnList(id)
  msg.value = res.msg
  message.success(res.msg)

  getWarnListApi()
}
//详情跳转
const router = useRouter()
const jump = async (id) => {
  const res = await getPole(id)
  setId(res.data)
  router.push({
    path: '/warn',
    query: {
      id: res.data.id
    }
  })
}
</script>
<style lang="scss" scoped>
.main {
  margin: 0 20px;
  padding: 20px;
  background-color: #fff;
  height: 100vh;
  .formList {
    border-bottom: 1px solid rgba(237, 237, 237, 0.9);
    margin-bottom: 20px;
  }
}
:deep(.ant-table-cell::before) {
  width: 0px !important;
}
.pagination {
  display: flex;
  justify-content: end;
  margin-top: 20px;
}
// :deep(.ant-btn-text[disabled]) {
//   padding-left: 0;
// }
</style>
